import React, { useReducer } from 'react'
/*
进行统一的状态管理
*/
export default function Hook8() {
    //useReducer函数内第一个参数是reducer函数 第二个函数是初始值
    // 这两个参数的作用:一个参数控制状态,另一个参数是状态

    /*
    引入useReducer以后,useReducer接受一个reducer函数作为参数,
    reduce函数接收两个参数,一个参数state,另一个参数是action
    然后返回一个状态state,state是返回状态中的值,dispath是
    可以发布action来更新state
    官方提供的两种state管理:useState,useReducer
    */
    const [state, dispatch] = useReducer((state, action) => {
        switch (action) {
            case 'add':
                return state + 1;
            case 'sub':
                return state - 1;
            default:
                return state;
        }
    }, 0)
    return (
        <div>
            <h1>{state}</h1>
            {/* 发布了一个用于更新state的事件 */}
            <button onClick={() => dispatch('add')}>+1</button>
            <button onClick={() => dispatch('sub')}>-1</button>
        </div>
    )
}
/**
 * 总结:在useReducer中传入了reducer函数根据action来更新state,如果action为add则增加
 * button中调用dispatch来发布add事件,发布add事件会在reducer函数根据这个类型对state进行操作,
 * 然后更新state
 */
